<template>
  <h2>setup和ref的基本使用</h2>
  <h3>{{count}}</h3>
  <button @click="updateCount">更新数据</button>
</template>

<script lang="ts">
// 这里可以使用ts代码
// defineComponent函数，目的是定义一个组件，内部可以传入一个配置对象
import { defineComponent, ref } from 'vue';
// 暴露出去一个定义好的组件
export default defineComponent({
  // 当前组件的名字是APP
  name: 'App',
  // 需求：页面打开后可以直接看到一个数据，点击按钮后，该数据可以发生变化
  // vue2的方式实现
  // data(){
  //   return{
  //     count:0
  //   }
  // },
  // methods:{
  //   updateCount(){
  //     this.count++;
  //   }
  // }
  // vue3的方式实现
  // setup是组合API的入口函数
  setup(){
    //变量
    // let count=0//此时的数据并不是响应式的数据（响应式数据：数据变化，页面跟着渲染变化）
    // ref是一个函数，作用：定义一个响应式的数据,返回的是一个Ref对象，对象中有一个value属性，如果需要对数据进行操作，需要
    // 使用该Ref对象调用value属性的方式进行数据的操作
    // html模板中不需要使用.value属性的写法
    const count=ref(0)
    // 方法
    function updateCount(){
      count.value++
    }
    // 返回的是一个对象
    return{
      count,//属性
      updateCount //方法
    }
  }
});
</script>

<style>

</style>
